![material-table でコンポーネント再描画時にフィルターがリセットされてしまう現象を対処する](https://devio2023-media.developers.io/wp-content/uploads/2020/09/material-table_large.png)
material-table でコンポーネント再描画時にフィルターがリセットされてしまう現象を対処する
はじめに
テントの中から失礼します、CX事業本部のてんとタカハシです!
Material-UI のテーブルを基に作られた material-table のフィルターですが、コンポーネントの再描画が走ると、フィルターが勝手にリセットされてしまう現象が発生しまして、それを対処したので記事にしようと思います。
material-table のフィルターとはなんぞやって思った方には、以前ブログに書いた下記の記事を読んで頂けると、概要が分かるかと思います。
material-table で日付範囲の指定によるフィルタリングがしたい
また、対処後のソースコードを下記のリポジトリに置いていますので、参考にして頂ければと思います。
GitHub - iam326/material-table-filter-reset-when-re-rendering-component
環境
$ sw_vers ProductName: Mac OS X ProductVersion: 10.15.6 BuildVersion: 19G2021 $ node --version v12.18.2 $ yarn --version 1.22.4 $ yarn list --depth=0 ... ├─ @material-ui/core@4.11.0 ├─ material-table@1.68.0 ├─ react@16.13.1 ├─ typescript@3.7.5 ...
現象
例えば、material-table で作ったクーポン一覧テーブルがあるとします。行をクリックしてクーポンを選択すると、背景の色が変わり、クーポンを使用するためのボタンが押せるようになる感じの UI を想定します。
ソースコードを下記に記載します。
行をクリックした際の処理は、onRowClick
に記述します。今回は行をクリックした際、どのクーポンを選んだかを記録しておくために、selectedCouponId
という state を更新する処理を実装しています。
また、options に filtering: true
を渡して、全ての列に文字列の部分一致によるフィルターを設置します。
const DataTable: React.FC = () => { const [selectedCouponId, setSelectedCouponId] = useState<string | null>(null); return ( <MaterialTable options={{ search: false, draggable: false, filtering: true, // ★ 全ての列にフィルターを設置 rowStyle: (rowData) => ({ backgroundColor: selectedCouponId === rowData.couponId ? '#eee' : '', }), }} onRowClick={(_, rowData) => // ★ 行クリック時の処理 setSelectedCouponId( rowData && (!selectedCouponId || selectedCouponId !== rowData.couponId) ? rowData.couponId : null ) } actions={[ { icon: () => ( <Button variant="contained" color="primary" disabled={!selectedCouponId} > 使用する </Button> ), disabled: !selectedCouponId, isFreeAction: true, onClick: () => alert('Button Click!!'), }, ]} columns={[ { title: 'クーポン ID', field: 'couponId', }, { title: '店舗', field: 'storeName' }, { title: 'クーポン名', field: 'couponName', }, { title: '割引率', field: 'discountRate', cellStyle: { textAlign: 'right' }, }, { title: '利用開始日', field: 'startDate', cellStyle: { textAlign: 'right' }, }, { title: '利用終了日', field: 'endDate', cellStyle: { textAlign: 'right' }, }, ]} data={tableData} title="クーポン一覧" /> ); };
では、このテーブルに対して、店舗名に「秋葉原」を含むクーポンのみ表示させるよう、フィルタリングを適用してあげます。
その後、行をクリックしてクーポンを選択すると、フィルターが勝手にリセットされ、全てのクーポンが表示されてしまいます。行をクリックしたことで selectedCouponId
が更新され、コンポーネントの再描画が走り、列情報がリセットされた結果、この現象が起きてしまうということが考えられます。
対処法
簡単です。列情報自体を state 化するだけで、この現象を対処できます。これでコンポーネントの再描画が走っても列情報を維持することができます。
const [columnInfo] = useState<Array<Column<Coupon>>>([ // ★ 列情報を state 化 { title: 'クーポン ID', field: 'couponId', }, ... <MaterialTable ... columns={columnInfo} // ★ state 化した列情報を渡す data={tableData} title="クーポン一覧" />
フィルタリング適用後に、行をクリックしてクーポンを選択しても、フィルターはそのまんまになりました!
おわりに
今回は、material-table でコンポーネント再描画時にフィルターがリセットされてしまう現象の対処方法についてご紹介しました。
material-table が標準で用意しているフィルターと、行クリック時の処理を単純に組み合わせた結果、この現象が発生してしまいました。最初はどう対処すれば良いのか見当がつかなかったのですが、GitHub の Issue を探っていたら、同じような現象で困っている人がいて、その中のコメントで答えを見つけることができました。めちゃ助かった。
Issues - Filtering states reset upon rerendering remote table
今回は以上になります。最後まで読んで頂きありがとうございました!